<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery validation plug-in - main demo</title>


<script src="Scripts/jquery-1.9.0.js"></script>
<script src="Scripts/jquery.validate.js"></script>
<script>
  $(document).ready(function () {

    $("#commentForm").validate({

      rules: {
        phappy: {
          required: true,
          number: true,
          min: 0,
          max: 100,
        },
        puhappy: {
          required: true,
          number: true,
          min: 0,
          max: 100,
        }

      },
      submitHandler: function (form) {
        var total = parseInt($("#phappy").val()) + parseInt($("#puhappy").val());
        if (total != 100) {
          $("#commentForm div.mserror").html("Your percantage fields must sum to 100.")
          return false;
        } else form.submit();
      }

    });
  });

</script>
</head>
<body>
<form id="commentForm" method="post" action="">
<fieldset>
<p>
<label for="phappy">Percent Happy</label>
<em>*</em><input id="phappy" name="phappy" size="2" />
</p>
<p>
<label for="puhappy">Percent Unhappy</label>
<em>*</em><input id="puhappy" name="puhappy" size="2" />
</p>
<p>
<input class="submit" type="submit" value="Submit"/>
</p>
</fieldset>
<div class="mserror"></div>
</form>
</body>
</html>